<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线人数统计</title>
    <script src="js/ajax.js"></script>
    <script src="js/vue.min.js"></script>
</head>
<body>
<fieldset>
    <legend>在线人数统计</legend>
    <dl>
        <dt>共有{{onlines}}人在线</dt>
        <dd>
            <ol>
                <li v-for="time,name,index in users">
                    <label>{{name}}</label>
                    <small>{{time}}</small>
                </li>
            </ol>
        </dd>
    </dl>
</fieldset>

<script>
    var v = new Vue({
        el:"fieldset",
        data:{
            users : {},
            time:'(new Date().getTime()-time)/1000'
        },
        created(){
            //箭头函数
            get("onlines.s",(result)=>{
                this.users=result;
            });
        },
        computed :{
            onlines(){
                var total = 0;
                for (let name in this.users){
                    total++;
                }
                return total;
            }

        }
    })


</script>

</body>
</html>

<style>
    * {
        vertical-align: middle;
        text-decoration: none;
    }

    fieldset {
        width: 50%;
        margin: 40px auto;
    }

    div {
        line-height: 50px;
    }

    span {
        display: inline-block;
        width: 200px;
        line-height: 30px;
        vertical-align: middle;
        color: red
    }

    input<small>span<small>select {
        min-width: 200px;
        height: 30px;
        text-align: center;
        box-sizing: border-box;
    }

    label {
        min-width: 70px;
        display: inline-block;
        padding: 0px 5px;
        box-sizing: border-box;
    }

    small{
        color: #999999;
        margin-left: 20px;
    }

    legend{
        background-color: #ddd;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #555;
    }

</style>

